<template>
	<div class="book">
		<h2 class="book-notice">预定须知</h2>
		<div class="confirm-time">
			<h3 class="book-confirm-time">{{getBaseMsg.confirmTime}}</h3>
			<p class="book-confirm-message">{{getBaseMsg.bookNotice.confirmBusiness}}<span>{{getBaseMsg.bookNotice.timePoint}}</span>{{getBaseMsg.bookNotice.confirmSend}}<span>{{getBaseMsg.bookNotice.confirmMessage}}</span></p>
		</div>
		<div class="use-process">
			<ul class="book-use-process">
				<li class="use-process-detail"><h3>{{getBaseMsg.useProcess}}</h3></li>
				<li class="book-use-process-notice">
					<ul class="clearfix">
						<li><img src="../../assets/img/Rightarraw@3x.png"></li>
						<li>查看注意事项</li>
					</ul>
					
				</li>
			</ul>
			<ul class="book-use-mail">
				<li class="book-use-item" v-for="(item, index) in getBaseMsg.bookProcess">
					<span class="book-use-circle">{{index + 1}}</span>
					<div :class="{'book-use-confirm': index !== getBaseMsg.bookProcess.length-1}">
						<p class="book-confirm-message">{{item.stepTips}}</p>
						<p class="book-confirm-succcess">{{item.stepContent}}</p>
					</div>				
				</li>
			</ul>
		</div>
		<div class="change-tips">
			<h3 class="change-refunds-notice">{{getBaseMsg.changeNotice}}</h3>
			<p class="change-specify-date">{{getBaseMsg.refundable}}</p>
			<ul class="change-refunds-item">
				<li v-for="(item, index) in getBaseMsg.changeTips">{{item}}</li>
			</ul>
			<p class="change-refunds-description">{{getBaseMsg.refundNotice}}</p>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name: "bookNotice",
		computed: {
  		...mapGetters([
      	'getBaseMsg'
    	])
 	  }
	}
</script>

<style scoped lang="scss">
	$verticalDistance: 1rem;
	$horizontalDistance: 1.63rem;
	.book{
		border-top: $verticalDistance solid rgb(240, 240,240);
		border-bottom: 1px solid #E1E1E1;
		.book-notice{
			font-family: ".PingFang-SC-Semibold";
			font-size: 1.36rem;
			color: #333;
			letter-spacing: 0;
			padding: $verticalDistance 0 $verticalDistance $horizontalDistance;
			border-bottom: 1px solid #E1E1E1;
		}
		.confirm-time{
			font-family: ".PingFang-SC-Regular";
			font-size: 1.28rem;
			color: #333;
			letter-spacing: 0;
			padding: $verticalDistance $horizontalDistance;
			.book-confirm-time{
				font-family: ".PingFang-SC-Medium";
				font-size: 1.28rem;
				line-height: 2rem;
			}
			.book-confirm-message{
				color: #666;
				span{
					color: #FF6633;
				}
			}
		}
		.use-process{
			margin: 0 0 $verticalDistance $horizontalDistance;
			padding: $verticalDistance $horizontalDistance 0 0;
			border-top: 1px solid #E1E1E1;
			border-bottom: 1px solid #E1E1E1;
			.book-use-process{
				display:-moz-box; 
				display:-webkit-box; 
				display:box;
				font-family: ".PingFang-SC-Medium";
				font-size: 1.28rem;
				color: #333;
				letter-spacing: 0;
				line-height: 1.28rem;
				.use-process-detail{
					-moz-box-flex:3.0; 
					-webkit-box-flex:3.0; 
					box-flex:3.0;
				}
				.book-use-process-notice{
					font-size: 1.2rem;
					color: #999;
					-moz-box-flex:1.0; 
					-webkit-box-flex:1.0; 
					box-flex:1.0;
					li{
						float: right;
						&:first-child{
							margin-left: .5rem;
						}
					}
				}
			}
			.book-use-mail{
				font-family: ".PingFang-SC-Regular";
				font-size: 1.28rem;
				color: #666;
				letter-spacing: 0;
				line-height: 2rem;
				.book-use-item{
			  	position: relative;
			  	.book-use-circle{
			  		width: 1.5rem;
					  height: 1.5rem;
					  border-radius: 50%;
					  background: #FF6633;
					  color: #fff;
					  position: absolute;
					  left: .2rem;
					  top: .2rem;
					  text-align: center;
					  line-height: 1.5rem;
			  	}
			  	p{
			  		margin-left: 2rem;	
			  	}
			  	p:last-child{
			  		margin-bottom: $verticalDistance;
			  	}
			  	.book-use-confirm{	
						&:after{
							content: '';
							display: block;
							width: 0.05rem;
							height: 100%;
							background: #E1E1E1;
							position: absolute;
							left: .9rem;
    					top: 1.7rem;
						}
					}
					.book-confirm-message{
						color: #FF6633;
					}
				}	
			}
		}
		.change-tips{
			font-size: 1.28rem;
			letter-spacing: 0;
			line-height: 2rem;
			padding: 0 $horizontalDistance 4rem $horizontalDistance;
			.change-refunds-notice{
				font-family: ".PingFang-SC-Medium";
				padding-bottom: .5rem;
			}
			.change-refunds-item{
				font-family: ".PingFang-SC-Regular";
				color: #666;
				line-height: 2rem;
			}
			.change-specify-date{
				color: #F63;
			}
			.change-refunds-description{
				color: #666;
				padding: $verticalDistance 0;
			}
		}
	}
</style>
